<template>
  <div class="header">
    <div class="name">
      <h2>机蜂小说阅读平台</h2>
    </div>
    <div class="opt">
      <div class="menu">
        <ul>
          <li><router-link :class="activeIndex === 1 ? 'menu-active' : ''" to="/">首页</router-link></li>
          <li><router-link :class="activeIndex === 2 ? 'menu-active' : ''" to="/category">分类</router-link></li>
          <li><router-link :class="activeIndex === 3 ? 'menu-active' : ''" to="/record">书架</router-link></li>
          <li v-if="isLogin">
            <el-dropdown trigger="click">
              <span>
                <a href="javascript:;">{{loginInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i></a>
              </span>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <a href="/user">个人中心</a>
                </el-dropdown-item>
                <el-dropdown-item @click.native="author" v-if="loginInfo.loginInfo.role !== 2">
                  <a href="javascript:;" >作者认证</a>
                </el-dropdown-item>
                <el-dropdown-item @click.native="logout">
                  <a href="javascript:;" >退出</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li v-else>
            <a href="javascript:;" @click="openLoginDialog">登录</a>
          </li>
        </ul>
      </div>
    </div>
    <LoginView ref="loginView" @closeDialog="getLoginUser"/>
  </div>
</template>

<script>
import LoginView from '@/views/front/components/LoginView.vue'
export default {
  name: 'HeaderView',
  components: { LoginView },
  data () {
    return {
      isLogin: false,
      loginInfo: {
        nickname: '吴彦祖'
      }
    }
  },
  props: {
    activeIndex: {
      default: 1,
      type: Number
    }
  },
  methods: {
    openLoginDialog () {
      this.$refs.loginView.init()
    },
    getLoginUser () {
      this.loginInfo = JSON.parse(sessionStorage.getItem('vipInfo') || {})
      if (this.loginInfo.name) {
        this.isLogin = true
      }
    },
    author () {
      this.$http.get('api/vip/author', { vipId: this.loginInfo.vipId, userId: this.loginInfo.loginInfo.userId }).then(() => {
        this.$message('申请成功，可以登录后台')
        this.$router.push('login')
      })
    },
    logout () {
      this.$confirm('确定退出登录吗？').then(() => {
        sessionStorage.removeItem('vipInfo')
        this.isLogin = false
      })
    }
  },
  created () {
    this.getLoginUser()
  }
}
</script>

<style scoped lang="scss">
.header{
  height: 60px;
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255,255,255,1);
  border-bottom: 1px solid yellowgreen;
    .name{
    padding-left: 20px;
  }
  .opt{
    display: flex;
    align-items: center;
    .menu{
      width: 450px;
      margin: 0 30px;
      ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        height: 60px;
        li{
          width: 100px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          a:hover{
            border-bottom: 2px solid yellowgreen;
          }
        }
      }
    }
  }
}

h2,a{
  color: #000;
  text-decoration: none;
}
.menu-active{
  border-bottom: 2px solid yellowgreen;
}
</style>
